<template>
  <div
    class="q-pa-md relative-position"
    style="height: 280px; max-height: 80vh"
  >
    <t-btn
      v-morph:btn:mygroup:300.resize="morphGroupModel"
      class="absolute-bottom-left q-ma-md"
      fab
      color="primary"
      size="lg"
      icon="add"
      @click="nextMorph"
    />

    <t-card
      v-morph:card1:mygroup:500.resize="morphGroupModel"
      class="absolute-bottom-left q-ma-md bg-primary text-white"
      style="width: 300px; border-bottom-left-radius: 2em"
    >
      <t-card-section class="text-h6"> New user </t-card-section>

      <t-card-section class="text-subtitle1">
        Please fill the details for a new user.
      </t-card-section>

      <t-card-actions align="right">
        <t-btn flat label="Next" @click="nextMorph" />
      </t-card-actions>
    </t-card>

    <t-card
      v-morph:card2:mygroup:500.tween="morphGroupModel"
      class="absolute-bottom-left q-ma-md bg-primary text-white"
      style="width: 300px; border-bottom-left-radius: 2em"
    >
      <t-card-section class="text-h6"> Finalize registration </t-card-section>

      <t-card-section class="q-py-xl text-center text-subtitle2">
        Thank you for registering.
      </t-card-section>

      <t-card-actions align="right">
        <t-btn flat label="Close" @click="nextMorph" />
      </t-card-actions>
    </t-card>
  </div>
</template>

<script>
  import { ref } from 'vue';

  const nextMorphStep = {
    btn: 'card1',
    card1: 'card2',
    card2: 'btn',
  };

  export default {
    setup() {
      const morphGroupModel = ref('btn');

      return {
        morphGroupModel,
        nextMorph() {
          morphGroupModel.value = nextMorphStep[morphGroupModel.value];
        },
      };
    },
  };
</script>
